<template>
	<view>
		<n-loading></n-loading>
		<view class="homePage">
			<top-bar :home="false" :backState="2000" :transparentFixedFontColor="optionVal.topbar.topTabFontColor" :type="optionVal.topbar.topTabType" title="御贡优品"></top-bar>
			
				<view class="bannerBox">
					<view class="bannerRelBox">
						<swiper class="swiper" @change="bannerChange" :duration="bannerSet.duration" :autoplay="true">
							<swiper-item v-for="(item,index) of indexAssembly.bannerList" :key="index">
								<view class="bannerImgBox" @tap="goInfo(item.type,item.content,item.goods?item.goods.owner_id:'')">
									<dh-image class="banner" :src="item.image" errorSrc="https://lovebirdopen.com/static/img/cBj/dPicture.png"></dh-image>
								</view>
							</swiper-item>
						</swiper>
						<view class="swiperDots">
							<view class="swiperDot" :class="{swiperDotActive:indexAssembly.bCurrent==index}" v-for="(item,index) of indexAssembly.bannerList" :key="index"></view>
						</view>
					</view>
				</view>
				<!-- 定位 -->
				<!--  @tap="getCity -->
				<view class="location" @click="getCity">
					<u-icon name="map" size="38"></u-icon>
					<text>{{indexAssembly.curCity}}</text>
				</view>
				<!-- 头条新闻 -->
				<view class="headlines">
					<image src="../../static/svgIcon/news.svg" @click="subcontractGo"></image>
					<!-- ./newsDetail -->
					<view class="newsTitle">
						<u-notice-bar mode="vertical" :list="indexAssembly.noticeList" @click="newsDetailGo" :volume-icon="false" bg-color="#fff" color="#333" duration="3000" padding="0rpx 24rpx"></u-notice-bar>
					</view>
				</view>
				
				<!-- 最新活动 -->
				<view class="newest">
					<image src="../../static/svgIcon/lable1.svg" class="activity"></image>
					<view class="newsetList"  @tap="goInfo(3,indexAssembly.newestInfo.goods[0].id,indexAssembly.newestInfo.owner_id)">
						<view class="noNewes" v-if="indexAssembly.newestInfo==null">
							<image src="../../static/svgIcon/noNewes.svg"></image>
						</view>
						<view class="newsetItme" v-if="indexAssembly.newestInfo">
							<!-- <view class="left" @tap="goInfo(indexAssembly.newestType,indexAssembly.newestId,indexAssembly.newestInfo.owner_id)"> -->
							<view class="left">
								<dh-image class="niccImg" :src="indexAssembly.newestInfo.image" errorSrc="https://lovebirdopen.com/static/img/cBj/dPicture.png"></dh-image>
								<view class="time">
									<view>距结束</view>
									<view>
										<u-count-down class="u-countdown-nicc" :timestamp="endCountDown(indexAssembly.newestInfo.end_at)" separator="colon" bg-color="transparent" color="#fff" separator-color="#fff" separator-size="20" font-size="20"></u-count-down>
									</view>
								</view>
							</view>
							<view class="right">
								<view class="goodsName ellipsis2">
									<label>秒杀</label>
									{{indexAssembly.newestInfo.goods[0].name}}
								</view>
								<view class="introduce ellipsis">
									{{indexAssembly.newestInfo.goods[0].brief}}
								</view>
								<view class="original">￥{{indexAssembly.newestInfo.goods[0].mktprice}}</view>
								<view class="nowPrice">
									<view>￥<text>{{indexAssembly.newestInfo.goods[0].price}}</text></view>
									<!-- buyNowGo -->
									<button hover-class="none" >立即购买</button>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 合作商家 -->
				<!-- <view class="cooperate">
					<image src="../../static/svgIcon/lable2.svg" class="activity"></image>
					<view class="storeList">
						<view class="storeItme" v-if="indexAssembly.storeList.length==0" v-for="(item,index) of noStore" :key="index">
							<view class="storeItmeImg">
								<image src="../../static/svgIcon/noStore.svg"></image>
							</view>
							<view class="storeName">暂无商品</view>
							<view class="range">
								<u-icon name="map"></u-icon>0.00
							</view>
						</view>
						<view class="storeItme" :style="index==1?'margin:0 2.75%':''" v-for="(item,index) of indexAssembly.storeList" :key="index" @tap="seeStore(item.owner_id)">
							<view class="storeItmeImg">
								<dh-image class="niccImg" :src="item.image" errorSrc="https://lovebirdopen.com/static/img/cBj/dPicture.png"></dh-image>
								<text class="label">{{item.label}}</text>
							</view>
							<view class="storeName ellipsis">{{item.name}}</view>
							<view class="range">
								<u-icon name="map"></u-icon>{{item.distance.toFixed(2)}}km
							</view>
						</view>
					</view>
					<view class="moreStore">
						<view class="moreStoreGo" @tap="moreStoreGo" v-if="indexAssembly.storeList.length>0">
							更多口碑商品
							<u-icon name="arrow-right" color="#999" size="16"></u-icon>
						</view>
						<view class="moreStoreGo" @tap="moreStoreGo" v-if="indexAssembly.storeList.length==0">
							暂无更多商品
							<u-icon name="arrow-right" color="#999" size="16"></u-icon>
						</view>
					</view>
				</view> -->
				
				<!-- 热销推荐 -->
				<view class="recommend">
					<image src="../../static/svgIcon/lable3.svg" class="activity"></image>
					<view class="hotSale">
						<view class="goodsItme" @tap="goDetail(item.id)" v-for="(item,index) of indexAssembly.hotList">
							<dh-image class="niccImg" :src="item.image" errorSrc="https://lovebirdopen.com/static/img/cBj/dPicture.png"></dh-image>
							<view class="goodsBox">
								<view class="goodsName ellipsis">{{item.name}}</view>
								<view class="goodsDescribe ellipsis">{{item.brief}}</view>
								<view class="goodsPrice">
									<view class="price">
										￥<text>{{item.price}}</text>
									</view>
									<view class="add">已售 {{item.sell_num}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				

			
			<!-- 朋友赠送的酒卡弹唱 -->
			<view class="acceptMask" v-if="giveCardIngo"></view>
			<view class="acceptCardBox" v-if="giveCardIngo">
				<view class="acceptCardBoxIn">
					<!-- 彩带 -->
					<image class="cd1" src="https://lovebirdopen.com/static/img/poster/cd1.png" mode=""></image>
					<image class="cd2" src="https://lovebirdopen.com/static/img/poster/cd2.png" mode=""></image>
					
					<view class="cardBox">
						<!-- 倒计时 -->
						<view class="countDown" v-if="acceptStates==0">
							<u-count-down :timestamp="giveCardIngo.duration-this.dateDiff(giveCardIngo.given_at)" :show-days="false" font-size='24' separator="colon" separator-size="24" separator-color="#FE6523" bg-color="#FE6523" color="#fff"></u-count-down>
							<text class="color1">后到期</text>
						</view>
						<view class="countDown" v-if="acceptStates==1">
							<u-count-down :timestamp="0" :show-days="false" separator="colon" font-size='24' separator-size="24" separator-color="#999999" bg-color="#E8E8E8" color="#fff"></u-count-down>
							<text class="color2">已到期</text>
						</view>
						<view class="countDown" v-if="acceptStates==2">
							<text class="color2">已被领取</text>
						</view>
						<!-- 赠送人 -->
						<view class="giener">
							<image class="giverImg" :src="giveCardIngo.avatar==null?'../../static/img/vector.svg':giveCardIngo.avatar" mode=""></image>
							<!-- <u-avatar class="giverImg" :src="" size="48"></u-avatar> -->
							<view class="giverTips">好友“{{giveCardIngo.nickname}}”送你一张酒卡</view>
						</view>
						<!-- 酒卡 -->
						<view class="liquorCardEach">
							<image class="liquorCardEachBj" :src="(giveCardIngo.specs).indexOf('500')!=-1?'https://lovebirdopen.com/static/img/cBj/popCard500.png':'https://lovebirdopen.com/static/img/cBj/popCard125.png'"></image>
							<view class="contBox">
								<view class="worth" :class="{worth1:(giveCardIngo.specs).indexOf('125')!=-1}">价值￥{{giveCardIngo.price}}</view>
								<view class="tit ellipsis" :class="{tit1:(giveCardIngo.specs).indexOf('125')!=-1}">{{giveCardIngo.liquor_cate.description}}</view>
								<view class="time" :class="{time1:(giveCardIngo.specs).indexOf('125')!=-1}">{{getdate(giveCardIngo.given_at,1)}}</view>
								<view class="time mt56 ellipsis" :class="{time1:(giveCardIngo.specs).indexOf('125')!=-1}">{{giveCardIngo.name}}</view>
							</view>
						</view>
					</view>
					<!-- 收下按钮 -->
					<view class="acceptBtnBox" v-if="acceptStates==0">
						<author-login @clickAgain="okReceived" title="立即收下" height="88rpx" fontColor="#7B381E" bgColor="radial-gradient(78.41% 78.41% at 47.06% 0%, #FFEBBE 25.54%, #FFCA74 83.46%)" borderRadius="94rpx" border="4rpx solid #FFEBBE"></author-login>
					</view>
					<view class="acceptBtnBox" v-if="acceptStates==1 || acceptStates==2">
						<view class="acceptBtn invalid">{{acceptStates==1?'已超时':'已被领取'}}</view>
					</view>
					<image class="acceptCardBoxBt" src="https://lovebirdopen.com/static/img/poster/cardPosterNewBj3.png"></image>
					<view class="closeBtn" @tap="closeAccept">
						<image src="../../static/svgIcon/close.svg" mode=""></image>
					</view>
				</view>
			</view>
		
			<!-- 程序不迷路 -->
			<view class="neverlostMask" v-if="neverlost==1"></view>
			<view class="neverlostBox" v-if="neverlost==1" :style="{top:(statusBarHeight*2+102) + 'rpx'}">
				<view class="neverlostArrow">
					<image src="../../static/neverlost/neverlostArrow.svg"></image>
				</view>
				<view class="neverlostCont">
					<view class="font1 mb32">添加小程序 购物不迷路</view>
					<view class="font2">1.点击右上角<image class="appletsIcon" src="../../static/neverlost/applets.svg"></image>再点击“添加到我的小程序”</view>
					<view class="neverlostBtnTips">
						<view class="tips1">转发</view>
						<view class="tips2"></view>
						<view class="tips1">关于御贡优品</view>
						<view class="addTips">添加到我的小程序</view>
					</view>
					<view class="font2">2.下拉微信首页，随时快速进入御贡优品商城</view>
					<view class="appletsBox">
						<view class="tit">小程序</view>
						<view class="appletsList">
							<view class="each">
								<view class="appletsHead appletsHead1"></view>
								<view class="appletsTit appletsTit1">御贡优品</view>
							</view>
							<view class="each">
								<view class="appletsHead"></view>
								<view class="appletsTit"></view>
							</view>
							<view class="each">
								<view class="appletsHead"></view>
								<view class="appletsTit"></view>
							</view>
							<view class="each">
								<view class="appletsHead"></view>
								<view class="appletsTit"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="iGot" @tap="iGot">我知道了</view>
			</view>
		</view>
		
		<!-- 好友受邀出现的第一个弹窗 -->
		<u-mask :show="helpshow">
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="helpLogo">
						<image src="../../static/ceshi/logistics.png" mode=""></image>
					</view>
					<view class="helpKuang">
						<image src="https://lovebirdopen.com/static/img/wineTasting/jiuping.png" mode=""></image>
						<view class="helpTitle">
							我正在参与活动
							点击卡片帮我攒酒
						</view>
					</view>
					<image class="helptt" src="https://lovebirdopen.com/static/img/wineTasting/helptt.png" mode=""></image>
					<view class="helpp">
						有机会免费品酒
					</view>
					<view class="help_hongbao">
						<image src="https://lovebirdopen.com/static/img/wineTasting/hongbao.png" mode=""></image>
					</view>
					<view class="helpDelete" @click="helpDelete()">
						<image src="../../static/svgIcon/close.svg" mode=""></image>
					</view>
				</view>
			</view>
		</u-mask>
		
		<!-- 免费喝酒 -->
		<u-mask :show="onshow" @click="onshow = false">
			<view class="warp">
				<view class="rect" @tap.stop>
					<image class="help_s" src="https://lovebirdopen.com/static/img/wineTasting/help20.png" mode=""></image>
					<view class="help_q">
						有机会免费品酒
					</view>
					<view class="helpHongTwo">
						<image src="https://lovebirdopen.com/static/img/wineTasting/help21.png" mode=""></image>
					</view>
					<view class="helpButtom">
						我也要免费喝酒
					</view>
					<view class="helpDelete" @click="helpDelete()">
						<image src="../../static/svgIcon/close.svg" mode=""></image>
					</view>
				</view>
			</view>
		</u-mask>
		<!-- 第三种模式 -->
		<u-mask :show="inviteShow" @click="inviteShow = false">   
			<view class="warp">
				<view class="rect" @tap.stop>
					<image class="help_s" src="https://lovebirdopen.com/static/img/wineTasting/help20.png" mode=""></image>
					<view class="help_q">
						有机会免费品酒
					</view>
					<view class="helpHongTwo">
						<image src="https://lovebirdopen.com/static/img/wineTasting/help21.png" mode=""></image>
					</view>
					<view class="helpButtom">
						去邀请好友助力
					</view>
					<view class="helpDelete" @click="helpDelete()">
						<image src="../../static/svgIcon/close.svg" mode=""></image>
					</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 好友助力
				helpshow: false,       //帮我攒酒
				onshow: false,         //我的免费喝酒
				inviteShow:false,		//邀请好友助力
				// banner
				bannerSet:{
					duration: 500
				},
				// 口碑商家
				noStore:[1,2,3],
				// 收到赠送酒卡信息
				cardKey:'',
				acceptStates:0,
				giveCardIngo:null,
				// 小程序码参数
				scene:null,
				// 程序不迷路
				neverlost:0,
				// 导航栏高度
				statusBarHeight: 0,
				// morestore
				morestore:null,
			}
		},
		props:["optionVal","indexAssembly"],
		mounted() {
			var _this = this;
			if(this.optionVal.scene){
				this.scene = this.resolvingScene(this.optionVal.scene);
				// 小程序码跳进来的参数
				if(this.scene.ref){
					uni.setStorage({
					    key: 'refVal',
					    data: this.scene.ref
					});
				}
				if(this.scene.card && this.indexAssembly.cardReady==null){
					this.cardKey = this.scene.card;
					this.receivedWineCard(this.scene.card);
				}
			}
			
			// 直接分享链接跳进来的参数
			var neverlostBon = true;
			if(this.optionVal.ref){
				uni.setStorage({
				    key: 'refVal',
				    data: this.optionVal.ref
				});
			}
			if(this.optionVal.card && this.indexAssembly.cardReady==null){//收到酒卡
				this.cardKey = this.optionVal.card;
				this.receivedWineCard(this.optionVal.card);
			}
			
			// 判断有没有程序不迷路
			if((!this.resolvingScene(this.optionVal.scene).card) && (!this.optionVal.card)){//
				uni.getStorage({
				    key: 'neverlostVal',
				    success: function (res) {
				        _this.neverlost = 0;
						neverlostBon = false;
				    }
				});
				setTimeout(function (){
					if(neverlostBon){
						uni.setStorage({
						    key: 'neverlostVal',
						    data: 'ok',
						    success: function () {
								_this.neverlost = 1;
						    }
						});
					}
				}, 2000);
			}
		},
		created() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		},
		methods: {
			helpshows(){
				this.helpshow != false
			},
			// banner跳详情
			goInfo(type,content,goodsType){
				console.log(type,content,goodsType)
				if(content!='' && content!=null){
					if(type==1){//文章
						uni.navigateTo({
							url: '/pages/index/newsDetail?id='+content
						});
					}else if(type==2){//url
						
					}else if(type==3){//商品
						uni.navigateTo({
							url: '/pages/index/goodsInfo?id='+content
						});
					}else if(type==4){//商铺
						uni.navigateTo({
							url: '/pages/publicPraise/storeInfo?id='+content
						});
					}
				}
			},
			
			// 商品详情
			goDetail(id){
				uni.navigateTo({
					url:'/pages/index/goodsInfo?id='+id
				})
			}, 
			
			newsDetailGo(index){
				uni.navigateTo({
					url: '/pages/index/newsDetail?id='+this.indexAssembly.newsList[index].content
				});
			},
			buyNowGo(){
				uni.navigateTo({
					url: '/pages/order/confirmOrder?id='+this.indexAssembly.newestId
				});
			},
			seeStore(owner_id){
				uni.navigateTo({
					url:'/pages/publicPraise/storeInfo?owner_id='+owner_id
				})
			},
			moreStoreGo(){
				this.morestore = 1;
				// 首页里面更多口碑商家
				this.$emit("seeStore",this.morestore);
			},
			// 收到酒卡
			receivedWineCard(card){
				this.apiget('/mall/liquor-card/detail',{card:card}).then(res =>{
					if(res.data.status == 200 ) {
						this.giveCardIngo = res.data.data;
						var djs = res.data.data.duration-this.dateDiff(res.data.data.given_at);
						if(djs<=0){//已超时
							this.acceptStates = 1;
						}
						if(res.data.data.given_num==0){//已被领取
							this.acceptStates = 2;
						}
						this.$emit("cardReady",1);
					}
				})
			},
			okReceived(){
				var _this = this;
				if (uni.getStorageSync('TOKEN')) {
					this.testToken('/site/get-info',{}).then(res => {
						if(res.data.status==200){//token有效
							this.apipost('/mall/liquor-card/update',{given:1,card:this.cardKey}).then(res =>{
								if(res.data.status == 200 ) {
									uni.showToast({
										icon: 'success',
										duration:1000,
										title: '已领取到酒卡',
										success: res => {
											setTimeout(function (){
												_this.giveCardIngo = null;
											}, 1000);
										},
									});
								}
							})
						}
					})
				}
			},
			closeAccept(){
				this.giveCardIngo = null;
			},
			// banner图切换
			bannerChange(e) {
				// this.indexAssembly.bCurrent = e.detail.current;
				// 首页里面更多口碑商家
				this.$emit("bCurrentChange",e.detail.current);
			},
			getCity(){
				uni.navigateTo({
					url:"/pages/index/city"
				})
			},
			iGot(){
				this.neverlost = 0;
			},
			//点击消失
			helpDelete(){
				this.helpshow = false;
				this.onshow = false;
				this.inviteShow = false;
			},
			// 测试
			subcontractGo(){
				uni.navigateTo({
					url: '/pagesActivity/pages/recruitOfficer/index'
				});
			}
		}
	}
</script>

<style lang="scss">
	.seat{
		height: 88rpx;
	}
	.location {
		display: flex;
		align-items: center;
		position: absolute;
		max-width: 230rpx;
		padding: 0 20rpx;
		height: 52rpx;
		line-height: 52rpx;
		top: 108rpx;
		left: 32rpx;
		background: rgba(0, 0, 0, 0.24);
		font-size: 28rpx;
		color: #FFFFFF;
		border-radius: 36rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		.u-icon {
			margin-right: 10rpx;
		}
	}

	.goodsBox {
		padding: 0 20rpx 30rpx 20rpx;
		line-height: 40rpx;

		.add {
			color: #666666;
			font-size: 24rpx;
		}

		.goodsPrice {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;

			.price {
				color: #FF5238;
				font-size: 24rpx;

				text {
					font-size: 36rpx;
				}
			}

			label {
				margin-left: 8rpx;
				color: #999999;
				font-size: 22rpx;
				text-decoration: line-through;
			}
		}

		.goodsName {
			margin-top: 20rpx;
			font-size: 32rpx;
			line-height: 40rpx;
			font-weight: 900;
		}

		.goodsDescribe {
			font-size: 24rpx;
			line-height: 40rpx;
			color: #666666;
		}

	}

	.hotSale {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
		flex-direction: row;
		padding: 0 32rpx;
	}

	.goodsItme {
		max-width: 48%;
		margin-bottom: 20rpx;
		background-color: #FFFFFF;
		box-shadow: 0px 2px 8px rgba(255, 82, 56, 0.02);
		border-radius: 8rpx;
		overflow: hidden;

		image {
			display: block;
			width: 334rpx;
			height: 334rpx;
			border-radius: 8rpx 8rpx 0 0;
		}
	}

	.storeList {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: flex-start;
		flex-direction: row;

		.storeItme {
			// flex: 1;
			max-width: 31.5%;
			padding-bottom: 16rpx;

			.storeItmeImg{
				position: relative;
				width: 208rpx;
				height: 196rpx;
				border-radius: 8rpx;
				overflow: hidden;
				
				image {
					display: block;
					width: 208rpx;
					height: 196rpx;
				}
				.label{
					position: absolute;
					bottom: 0;
					left: 0;
					display: inline-block;
					padding: 0 8rpx;
					font-size: 22rpx;
					line-height: 32rpx;
					color: #fff;
					background-color: #7B5D34;
					border-radius: 0px 8rpx;
				}
			}

			.storeName {
				font-size: 28rpx;
				line-height: 54rpx;
			}

			.range {
				font-size: 24rpx;
				color: #999;
			}
		}
		
		// .storeItme:nth(2){
		// 	margin: 0 2.75rpx;
		// }
	}
	
	.moreStore{
		// padding: 0 16rpx;
		
		.moreStoreGo{
			padding: 8rpx 0;
			text-align: center;
			font-size: 12px;
			line-height: 20px;
			color: #999999;
			background: #F8F8FA;
			border-radius: 8rpx;
		}
	}

	.newsetList{
		margin: 0 32rpx 32rpx;
		background-color: #FFFFFF;
		border-radius: 8rpx;
		overflow: hidden;
	}
	.cooperate {
		padding: 0 16rpx 32rpx;
		margin: 0 32rpx 32rpx;
		background-color: #FFFFFF;
		border-radius: 8rpx;
	}

	.original {
		margin-top: 18rpx;
		color: #999999;
		font-size: 22rpx;
		line-height: 24rpx;
		text-decoration: line-through;
	}

	.nowPrice {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #FF5238;
		font-size: 24rpx;
		font-weight: 600;

		text {
			font-size: 36rpx;
		}

		button {
			display: inline-block;
			width: 144rpx;
			height: 56rpx;
			line-height: 56rpx;
			border-radius: 34rpx;
			font-size: 24rpx;
			font-weight: normal;
			color: #FFFFFF;
			background: #FF5238;
		}
	}

	// .newest {
	// 	padding-top: 20rpx;
	// }

	.newsetItme {
		height: 260rpx;
		display: flex;
		align-items: center;

		.left {
			width: 260rpx;
			height: 100%;
			position: relative;
			
			// image{
			// 	width: 260rpx;
			// 	height: 260rpx;
			// }
			
			.niccImg{
				width: 260rpx;
				height: 260rpx;
			}

			.time {
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: absolute;
				bottom: 0;
				padding: 8rpx;
				width: 100%;
				background: #FF5238;
				font-size: 24rpx;
				opacity: 0.8;
				border-radius: 0 0 0 8rpx;
				color: #FFFFFF;
				
				.u-countdown-nicc{
					font-size: 20rpx;
				}
			}
		}

		.right {
			flex: 1;
			max-width: 60%;
			margin: 0 20rpx;
			line-height: 40rpx;

			.goodsName {
				font-size: 28rpx;
				line-height: 40rpx;
			}

			.introduce {
				margin-top: 8rpx;
				font-size: 24rpx;
				line-height: 40rpx;
				color: #666666;
			}

			label {
				margin-right: 10rpx;
				padding: 4rpx 16rpx;
				font-size: 20rpx;
				color: #FF5238;
				background: #FBDAC8;
				border-radius: 34rpx;
			}
		}

		// image {
		// 	display: block;
		// 	width: 300rpx;
		// 	height: 300rpx;
		// 	border-radius: 8rpx 0 0 8rpx;
		// }
	}
	
	.noNewes{
		padding: 20rpx 0;
		text-align: center;
		background-color: #fff;
		
		image{
			display: inline-block;
			width: 236rpx;
			height: 224rpx;
		}
	}

	.homePage {
		// padding-top: 926rpx;
		background-color: #F8F8FA;
		padding-bottom: 120rpx;
		// height: 100%;

		.bannerBox{
			// position: absolute;
			// top: 0;
			// left: 0;
			width: 100%;
			height: 926rpx;
			
			.bannerRelBox{
				position: relative;
				width: 100%;
				height: 100%;
				
				.swiper{
					width: 100%;
					height: 100%;
					
					.bannerImgBox{
						width: 100%;
						height: 100%;
						
						.banner {
							width: 100%;
							height: 100%;
						}
					}
				}
				
				.swiperDots {
					position: absolute;
					bottom: 24rpx;
					right: 0;
					width: 100%;
					text-align: center;
					font-size: 0;
					
					.swiperDot{
						display: inline-block;
						width: 16rpx;
						height: 8rpx;
						margin: 0 4rpx;
						background: #D6E4FF;
						opacity: 0.4;
						border-radius: 2rpx;
					}
					
					.swiperDotActive{
						width: 32rpx;
						background: #FF5238;
						opacity: 1;
					}
				}
				
			}

		}

		.u-navbar {
			position: absolute;
		}

		.headlines {
			margin: 16rpx 32rpx;
			padding: 16rpx;
			background-color: #FFFFFF;
			border-radius: 8rpx;
			display: flex;
			align-items: center;

			image {
				width: 140rpx;
				height: 48rpx;
				margin-right: 20rpx;
			}

			.newsTitle {
				width: 100%;
				font-size: 24rpx;
				padding-left: 22rpx;
				border-left: 2rpx solid #CCCCCC;
			}
		}

		.activity {
			padding: 20rpx 0;
			display: block;
			margin: 0 auto;
			width: 192rpx;
			height: 34rpx;
		}
	}
	
	.acceptMask{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999999;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.4);
	}
	
	.acceptCardBox{
		position: fixed;
		top: 18%;
		left: 50%;
		z-index: 99999999;
		height: 826rpx;//984rpx
		width: 640rpx;
		margin-left: -320rpx;
		background-image: url('https://lovebirdopen.com/static/img/poster/cardPosterNewBj2.png');
		background-size: 100% 100%;
		
		.acceptCardBoxIn{
			width: 100%;
			height: 100%;
			padding: 0 58rpx;
			box-sizing: border-box;
			position: relative;
			
			.cd1{
				position: absolute;
				top: -32rpx;
				left: -60rpx;
				width: 162rpx;
				height: 172rpx;
			}			
			.cd2{
				position: absolute;
				bottom: -89rpx;
				right: -56rpx;
				z-index: 1;
				width: 194rpx;
				height: 244rpx;
			}
			
			.closeBtn{
				position: absolute;
				width: 40rpx;
				height: 40rpx;
				bottom: -72rpx;
				left: 50%;
				margin-left: -20rpx;
				
				image{
					width: 100%;
					height: 100%;
				}
			}
			
			.cardBox{
				width: 100%;
				height: 524rpx;
				// padding: 0 24rpx;
				box-sizing: border-box;
				border-radius: 16rpx;
				
				.countDown{
					height: 66rpx;
					width: 280rpx;
					margin: 0 auto 22rpx;
					box-sizing: border-box;
					text-align: center;
					font-size: 24rpx;
					line-height: 66rpx;
					background-image: url('https://lovebirdopen.com/static/img/poster/bjsBj.svg');
					background-size: 100% 100%;
					
					text{
						margin-left: 16rpx;
					}
					
					.color1{
						color: #FE6523;
					}
					.color2{
						color: #fff;
					}
				}
				
				.giener{
					margin-bottom: 24rpx;
					display: flex;
					font-size: 14px;
					line-height: 24px;
					color: #7B5D34;
					align-items: center;
					justify-content: center;
					
					.giverImg{
						display: inline-block;
						width: 48rpx;
						height: 48rpx;
						margin-right: 16rpx;
						border-radius: 50%;
					}
				}
				
				.liquorCardEach{
					position: relative;
					width: 100%;
					height: 300rpx;
					
					.liquorCardEachBj{
						position: absolute;
						top: 0;
						left: 0;
						z-index: 1;
						width: 100%;
						height: 100%;
						border-radius: 16rpx;
					}
					
					.contBox{
						width: 100%;
						height: 100%;
						position: relative;
						z-index: 2;
						padding: 40rpx;
						
						.worth{
							position: absolute;
							top: 10rpx;
							right: 0;
							width: 200rpx;
							padding-right: 16rpx;
							font-size: 24rpx;
							line-height: 34rpx;
							color: #755F3C;
							text-align: right;
						}
						
						.worth1{
							color: #FFE6A6;
						}
						
						.tit{
							font-size: 32rpx;
							line-height: 52rpx;
							color: #EAC181;
						}
						
						.tit1{
							color: #B97300;
						}
						
						.time{
							width: 320rpx;
							font-size: 24rpx;
							line-height: 40rpx;
							color: rgba(234, 193, 129, 0.7);
						}
						
						.time1{
							color: rgba(185, 115, 0, 0.7);
						}
						
						.mt56{
							margin-top: 56rpx;
						}
					}
				}
				
			}
			
			.acceptBtnBox{
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: 2;
				width: 100%;
				padding: 0 48rpx 44rpx;
				
				.acceptBtn{
					border-radius: 94rpx;
					background-color: #3E3129;
					height: 88rpx;
					color: #fff;
					text-align: center;
					font-size: 32rpx;
					line-height: 88rpx;
				}
				
				.invalid{
					background-color: #E8E8E8;
				}
			}
			
			.acceptCardBoxBt{
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 266rpx;
			}
		}
	}
	
	// 程序不迷路
	.neverlostMask{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999999;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.8);
	}
	.neverlostBox{
		position: fixed;
		top: 135rpx;
		left: 50%;
		z-index: 99999999;
		width: 100%;
		margin-left: -50%;
		
		.neverlostArrow{
			padding-right: 130rpx;
			margin-bottom: 12rpx;
			text-align: right;
			
			image{
				display: inline-block;
				width: 392rpx;
				height: 128rpx;
			}
		}
		
		.neverlostCont{
			margin-bottom: 32rpx;
			text-align: center;
			color: #FFFFFF;
			
			.font1{
				font-size: 48rpx;
				line-height: 64rpx;
			}
			
			.font2{
				height: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
					
				.appletsIcon{
					display: inline-block;
					width: 24rpx;
					height: 8rpx;
					margin: 0 8rpx;
				}
			}

			.mb32{
				margin-bottom: 32rpx;
			}
			
			.neverlostBtnTips{
				position: relative;
				width: 446rpx;
				min-height: 80rpx;
				margin: 8rpx auto 20rpx;
				background-color: #F8F8FA;
				border-radius: 8rpx;
				color: #333;
				font-size: 24rpx;
				line-height: 80rpx;
				
				.tips1{
					height: 80rpx;
				}
				.tips2{
					height: 56rpx;
				}
				.addTips{
					position: absolute;
					top: 50%;
					left: 50%;
					height: 80rpx;
					width: 490rpx;
					margin-top: -40rpx;
					margin-left: -245rpx;
					background-color: #fff;
					border-radius: 8rpx;
				}
			}
			
			.appletsBox{
				width: 470rpx;
				height: 218rpx;
				margin: 8rpx auto 0;
				background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(72, 72, 72, 0.42) 100%);
				border: 1rpx solid rgba(255, 255, 255, 0.5);
				border-radius: 8rpx;
				
				.tit{
					padding-top: 12rpx;
					font-size: 20rpx;
					line-height: 40rpx;	
					color: #333333;
				}
				
				.appletsList{
					display: flex;
					align-items: center;
					padding-top: 22rpx;
					
					.each{
						flex: 1;
						text-align: center;
						font-size: 0;
						
						.appletsHead{
							display: inline-block;
							width: 72rpx;
							height: 72rpx;
							margin-bottom: 12rpx;
							background: rgba(255, 255, 255, 0.24);
							border-radius: 50%;
						}
						.appletsHead1{
							background: #C4C4C4;
						}
						
						.appletsTit{
							display: inline-block;
							width: 94rpx;
							height: 24rpx;
							background: rgba(255, 255, 255, 0.24);
						}
						.appletsTit1{
							background: none;
							font-size: 20rpx;
							line-height: 24rpx;
						}
					}
				}
			}
		}
		
		.iGot{
			width: 210rpx;
			height: 66rpx;
			margin: 0 auto;
			font-size: 32rpx;
			line-height: 66rpx;
			text-align: center;
			color: #FFFFFF;
			border: 2rpx solid #FFFFFF;
			box-sizing: border-box;
			border-radius: 46rpx;
		}
		
	}
	
	// 好友点击跳转框
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	
	.rect {
		width: 556rpx;
		height: 70%;
		// background-color: #fff;
		position: relative;
	}
	.helpLogo{
		height: 100rpx;
		width: 100rpx;
		margin: 0 auto;
		border: 1px solid #988F81;
		border-radius: 50%;
		position: absolute;
		top: 10%;
		left: 50%;
		z-index: 1;
		transform: translate(-50% , -50%);
		overflow: hidden;
		
		image{
			height: 100%;
			width: 100%;
		}
	}
	.helpKuang{
		    height: 150rpx;
		    width: 78%;
		    position: absolute;
		    top: 21%;
		    left: 50%;
		    transform: translate(-50%, -50%);
		    border: 1px solid #988f81;
		    box-sizing: border-box;
		    border-radius: 16rpx;
		    display: flex;
		    justify-content: space-around;
		    align-items: center;
		
		image{
			height: 120rpx;
			width: 40rpx;
		}
		.helpTitle{
			height: 108rpx;
			width: 214rpx;
			color: #fff;
			font-size: 26rpx;
			margin-left: -140rpx;
			line-height: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			speak: digits;
			text-align: center;
		}
	}
	.helptt{
		height: 70rpx;
		width: 504rpx;
		position: absolute;
		top: 34%;
		left: 50%;
		transform: translate(-50% , -50%);
	}
	.helpp{
		// height: 34rpx;
		width: 274rpx;
		font-family: Microsoft YaHei UI;
		font-size: 36rpx;
		position: absolute;
		top: 41%;
		left: 50%;
		transform: translate(-50% , -50%);
		text-align: center;		
		color: #ECDEB3;
	}
	.help_hongbao{
		height: 390rpx;
		width: 330rpx;
		position: absolute;
		top: 67%;
		left: 50%;
		transform: translate(-50% , -50%);
		image{
			height: 100%;
			width: 100%;
		}
	}
	.helpDelete{
		position: absolute;
		width: 40rpx;
		height: 40rpx;
		left: 50%;
		bottom: 2%;
		transform: translate(-50%, -50%);
		image{
			width: 100%;
			height: 100%;
		}
	}
	.helpButtom{
		height: 88rpx;
		width: 384rpx;
		color:rgba(194,8,0,1);
		font-weight: bold;
		font-size: 32rpx;
		text-align: center;
		line-height: 88rpx;
		position: absolute;
		top: 76%;
		left: 50%;
		transform: translate(-50% , -50%);
		background: linear-gradient(180deg, #FDF59F 0%, #FDF59F 0.52%, #FAD251 35.94%, #F7BD2D 81.77%, #FAD660 100%);
		box-shadow: 0px 8rpx 1rpx #520F11;
		border-radius: 16rpx;
	}
	.help_s{
		height: 70rpx;
		width: 504rpx;
		position: absolute;
		top: 12%;
		left: 50%;
		transform: translate(-50% , -50%);
	}
	.help_q{
		// height: 34rpx;
		width: 274rpx;
		font-family: Microsoft YaHei UI;
		font-size: 36rpx;
		position: absolute;
		top: 18%;
		left: 50%;
		transform: translate(-50% , -50%);
		text-align: center;		
		color: #ECDEB3;
	}
	.helpHongTwo{
		height: 408rpx;
		width: 360rpx;
		position: absolute;
		top:46%;
		left: 50%;
		transform: translate(-50% , -50%);
		image{
			height: 100%;
			width: 100%;
		}
	}
	
</style>
